<template>
	<view class="uni-title" :style="'color:'+color">
		<view class="left_icon" :style="'background:'+color+';'" v-if="have_icon"></view>
		<view class="title">
			<slot></slot>
		</view>
		<view class="right_icon" @click="do_fun" v-if="have_to">
		{{right}}
		<u-icon color="color" size="12" name="arrow-right"></u-icon></view>
	</view>
	
<!-- 	<view class="grace-title grace-margin-top">
		<text class="grace-title-icon"></text>
		<text class="grace-title-text">值得购专区</text>
		<navigator class="grace-text-small">更多<text class="grace-icons icon-arrow-right"></text></navigator>
	</view> -->
	
	
</template>

<script>
	export default {
		name:"uni-title",
		props: {
			to:{
				type:String,
				default:''
			},
			have_icon:{
				type:Boolean,
				default:false
			},
			have_to:{
				type:Boolean,
				default:true
			},
			right:{
				type:String,
				default:'更多'
			},
			color:{
				type:String,
				default:'#fff'
			},
		},
		data() {
			return {
				
				
			};
		},
		methods: {
			do_fun(){
					// this.fun()
					this.$emit('fun')
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.uni-title{
	box-sizing: border-box;
	padding: 0 30rpx;
	height: 88rpx;
	line-height: 88rpx;
	display: flex;
	align-items: center;
	font-weight: bold;
	color: #333333;
	font-size: 30rpx;
	
	//左侧图标
	.left_icon{
		width: 6rpx;
		height: 30rpx;
		
		border-radius: 5rpx;
		margin-right: 10rpx;
	}
	
	//标题
	.title {
		flex: 1;
		// width: 670rpx;
		margin: 0 auto;
		
	}
	.right_icon{
		display: flex;
	
		font-size:22rpx; line-height:40rpx;
	}
	

}
</style>
